<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_getFeatureBySQL_FGB"></title>
    <style>
      #toolbar {
        position: absolute;
        top: 50px;
        right: 10px;
        width: 240px;
        text-align: center;
        z-index: 1000;
        border-radius: 4px;
      }
    </style>
  </head>
  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="toolbar" class="panel panel-primary">
      <div class='panel-heading'>
          <h5 class='panel-title text-center' data-i18n="resources.title_getFeatureBySQL"></h5></div>
      <div class='panel-body content'>
          <div class='panel'>
            <div class='input-group'>
              <span class='input-group-addon'>SQL</span>
              <input min="0" class="form-control" id="sql" placeholder="SMID > 0" />
            </div>
          </div>
          <input type="button" class="btn btn-default" data-i18n="[value]resources.text_query" onclick="query()"/>&nbsp;
          <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearFeatures()"/>
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100%"></div>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
    <script type="text/javascript">
      var map,
        resultLayer,
        baseUrl =
          (window.isLocal ? window.server : 'https://iserver.supermap.io') +
          '/iserver/services/map-world/rest/maps/World',
        url =
          (window.isLocal ? window.server : 'https://iserver.supermap.io') + '/iserver/services/data-world/rest/data';
      map = new ol.Map({
        target: 'map',
        // ol v7版本用法为ol.control.defaults.defaults； v6版本以下用法为ol.control.defaults
        controls: ol.control.defaults.defaults({ attributionOptions: { collapsed: false } })
          .extend([new ol.supermap.control.Logo({ link: "https://iclient.supermap.io" })]),
        view: new ol.View({
          center: [0, 0],
          zoom: 2,
          projection: 'EPSG:4326',
          multiWorld: true
        })
      });
      var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
          url: baseUrl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      map.addLayer(layer);

      function query() {
        clearFeatures();
        var sql = document.getElementById("sql").value || "SMID > 0";
        var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
          queryParameter: {
            name: 'world@World',
            attributeFilter: sql
          },
          datasetNames: ['World:world']
        });
        new ol.supermap.FeatureService(url).getFeaturesBySQL(
          sqlParam,
          'FGB'
        ).then(function (serviceResult) {
            const vectorSource = new ol.source.FGB({
              format: new ol.format.GeoJSON(),
              url: serviceResult.result.newResourceLocation,
              strategy: ol.loadingstrategy.all,
              wrapX: false
            });

            resultLayer = new ol.layer.Vector({
              source: vectorSource
            });
            map.addLayer(resultLayer);
          });
      }

      function clearFeatures() {
        map.removeLayer(resultLayer);
      }
    </script>
  </body>
</html>
